
<template>
  <!-- 故障代码维护-展示没有展示 -->
  <div class="resource-main-box new-page">
    <a-form-model layout="inline" :model="search" class="comm-search-f" :style="`width: calc(100% - ${sideMenuWidth} - 33px)`">

      <!-- 筛选条件与查询 -->

      <!-- 机型 -->
      <a-form-model-item label="">
        <airModel v-model="search.model" />
      </a-form-model-item>
      <!-- 故障码 -->
      <a-form-model-item label="">
        <a-input
          v-model="search.code"
          placeholder="故障码"
        />
      </a-form-model-item>
      <!-- 故障码 -->
      <a-form-model-item label="">
        <a-input
          v-model="search.name"
          placeholder="故障名称"
        />
      </a-form-model-item>

      <!-- 故障码 -->
      <a-form-model-item label="">
        <a-select
          v-model="search.sms"
          show-arrow
          style="minWidth: 130px"
          placeholder="是否发送短信和邮件"
          allow-clear
        >
          <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
          <a-select-option v-for="selectItem in sms" :key="selectItem.value" :value="selectItem.value">
            {{ selectItem.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <!-- 是否发送邮邮件或sms -->
      <a-form-model-item style="flex-basis:18%!important">
        <a-button type="primary" ghost :loading="listByParamLoading" @click="resetSearchHandler">
          重置
        </a-button>
        <a-button type="primary" class="ml-8" :loading="listByParamLoading" @click="changeTable({ current: 1 })">
          查询
        </a-button>

      </a-form-model-item>
    </a-form-model>

    <!-- table -->
    <div>
      <div class="pt-16 pl-16 pr-16 pb-16">
        <a-button type="primary" ghost :loading="listByParamLoading" @click="addVisible=true">
          新增
        </a-button>
      </div>

      <a-table

        :columns="columns"
        size="middle"
        :data-source="listByParamList"
        :row-key="(row,index) => row.id"
        :pagination="{
          showTotal:(total)=> `共 ${total} 条数据`,
          showSizeChanger: true,//设置每页显示数据条数
          showQuickJumper: true,
          size:'big',
          current:paginationOptions.pageNum,
          pageSize:paginationOptions.pageSize,
          total:paginationOptions.total
        }"
        :loading="listByParamLoading"
        :row-class-name="rowClassHandler"
        @change="changeTable"
      />
    </div>
    <!-- add -->
    <a-modal
      v-model="addVisible"
      :mask-closable="false"
      title=""
      :width="480"
      class="rt-i-modal"
      centered
      :confirm-loading="addFaultLoading"
      @ok="addConfirmHandler"
      @cancel="cancelHandler"
    >
      <span slot="closeIcon" class="c-dialog-close-icon"><a-icon :component="require('@/assets/icon/close.svg')" /></span>

      <div class="c-dialog-title fw-500">{{ addTitle }}故障代码</div>

      <a-form-model
        ref="addForm"
        :model="addForm"
        :rules="addRules"
      >

        <a-form-model-item label="故障名称" prop="name">
          <a-input
            v-model="addForm.name"
            placeholder="故障名称"
            class="input-type-o"
            style="width: 100%"
          />
        </a-form-model-item>
        <a-form-model-item label="故障类型" prop="type">
          <eventList v-model="addForm.type" class="input-type-o" />
        </a-form-model-item>

        <a-form-model-item label="机型" prop="model">
          <airModel v-model="addForm.model" class="input-type-o" />
        </a-form-model-item>

        <a-form-model-item label="故障级别" prop="level">
          <a-select
            v-model="addForm.level"
            class="input-type-o"
            show-arrow
            style="minWidth: 130px"
            placeholder="故障级别"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="selectItem in priorityList" :key="selectItem.id" :value="selectItem.value">
              {{ selectItem.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="故障代码" prop="code">
          <a-input v-model="addForm.code" placeholder="故障代码" class="input-type-o" style="width: 100%" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
import rowClass from '@/pages/common/rowClass';
import { priorityList } from '@/pages/common/constant.js';
import eventList from '@/pages/components/eventList';
import airModel from '@/pages/components/airModel';
export default {
  components: {
    eventList,
    airModel
  },
  mixins: [rowClass],
  data() {
    return {
      priorityList,
      search: {},
      sms: [
        {
          value: 0,
          name: '否'
        },
        {
          value: 1,
          name: '是'
        }
      ],
      addVisible: false,
      addForm: {},
      addTitle: '新增',
      addRules: Object.freeze({
        name: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        nameZh: [
          { required: true, message: '请填写', trigger: 'change' }
        ],
        smi: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }),
      columns: Object.freeze([

        {
          title: '机型',
          align: 'left',
          dataIndex: 'model',
          width: 100,
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '故障代码',
          align: 'left',
          dataIndex: 'code',
          width: 200,
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '故障类型',
          align: 'left',
          dataIndex: 'type',
          width: 100,
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '故障级别',
          align: 'left',
          dataIndex: 'level',
          width: 100,
          customRender: (value) => {
            return <priorityIcon priority={value} />;
          }
        },
        {
          title: '故障名称',
          align: 'left',
          dataIndex: 'name',
          customRender: (value) => {
            return value || '--';
          }
        },
        {
          title: '操作',
          align: 'left',
          dataIndex: 'option',
          width: 148,
          customRender: (value, record, index) => {
            const { id } = record;
            return [
              <a-popconfirm
                title='确认删除此项?' ok-type='danger'
                ok-text='确认'
                cancel-text='取消'
                onConfirm={() => this.delItemHandler(id)}
              >
                <a-button type='link'>删除</a-button>
              </a-popconfirm>,
              <a-button type='link' onClick={() => this.editEventHandler(record)}>修改</a-button>
              // <a-button type='primary' size='small' ghost>版本管理</a-button>
            ];
          }
        }

      ])

    };
  },
  computed: {
    ...mapState('faultCodeMaintenance', [
      'listByParamList',
      'listByParamLoading',
      'paginationOptions',
      'addFaultLoading'
    ]),
    ...mapGetters('setting', ['sideMenuWidth'])
  },
  mounted() {
    this.changeTable({ current: 1 });
  },
  methods: {
    ...mapMutations('faultCodeMaintenance', [
      'setState'
    ]),
    ...mapActions('faultCodeMaintenance', [
      'getServServiceConfList',
      'addFault',
      'deleteRepUplinkDestination',
      'updateFaul'
    ]),
    changeTable({ current, pageSize = 10 }) {
      if (pageSize !== this.paginationOptions.pageSize) {
        current = 1;
      }
      this.setState({ key: 'paginationOptions', payload: { ...this.paginationOptions, pageNum: current, pageSize }});
      this.getData();
    },
    addConfirmHandler() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.id) {
            this.updateFaul(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.getData();
              }
            });
          } else {
            this.addFault(this.addForm).then((rep) => {
              if (rep) {
                this.addVisible = false;
                this.cancelHandler();
                this.getData();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    cancelHandler() {
      this.addForm = {};
      this.addTitle = '新增';
      this.$refs.addForm.resetFields();
    },
    // 编辑
    editEventHandler(row) {
      this.addVisible = true;
      this.addForm = { ...row };
      this.addTitle = '修改';
    },
    // 确认删除
    delItemHandler(id) {
      this.deleteRepUplinkDestination({ id }).then((rep) => {
        if (rep) {
          this.getData();
        }
      });
    },
    // 重置
    resetSearchHandler() {
      this.search = {};
      this.changeTable({ current: 1 });
    },
    getData() {
      this.getServServiceConfList(this.search);
    }
  }
};
</script>

<style>

</style>
